<template>
	<view class="integral-packbox relative">
		<view v-for="(item, index) in resLists" :key="index">
			<view class="integral-info relative flex-direction-column" @click="gooDetailPage(item)">
				
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/integral-border-bg.png`" class="bg" mode=""></image>
				
				<view class="relative flex-justify-content-center">
					<comPlaceImage
						class="integral-cover"
						:lazyLoad="true"
						:src="item.reward_pool_cover"
						mode="aspectFill"></comPlaceImage>
				</view>
				
				<view class="font-hanserif-bold relative info-detail flex-full flex-align-items-center flex-justify-content-between">
					
					<view v-if="showNoticeTxtFun(item.reward_pool_name)" class="flex-align-items-center notices-txt flex-full">
						<uni-notice-bar
							class="uni-notice-bar font-hanserif-bold"
							color="#111111"
							background-color="transparent"
							:scrollable="true"
							:single="true"
							:text="showNoticeTxtFun(item.reward_pool_name)"
							:speed="54"
						></uni-notice-bar>
					</view>
					<view v-else class="truncate font-hanserif-bold relative info-title">
						{{ item.reward_pool_name }}
					</view>
					
					<view class="info-price relative font-hanserif-bold">
						{{ item.reward_price_1 }}积分/抽
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { setNavigateFunTo, setJumpFunTo } from '@/setupproject/TOOLS_FUN.js';
	export default {
		name: 'comIntegralList',
		props: ['resLists'],
		data() {
			return {};
		},
		computed: {
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {
			gooDetailPage(item) {
				const params = {
					poolTypeSence: 'integral',
					id: item.id,
				};
				
				if(item.schedule_num === 0) {
					setNavigateFunTo('secondary/infinitePage/infinitePage', params);
				}
			},
			
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.integral-packbox {
		.integral-info {
			width: 710rpx;
			height: 410rpx;
			margin: 14rpx auto 20rpx;
			font-size: 32rpx;
			color: #FFF;
			padding: 12rpx 14rpx 0;
			
			.integral-cover {
				width: 682rpx;
				height: 320rpx;
				overflow: hidden;
				margin-top: 2rpx;
				border-radius: 10rpx;
			}
			
			.info-detail {
				// padding: 14rpx;
				width: 100%;
			}
			
			.notices-txt {
				margin-left: 20rpx;
				padding-top: 8rpx;
			}
			
			.uni-notice-bar {
				height: 38rpx;
				flex: 1;
			}
			
			.info-title {
				margin-left: 20rpx;
			}
			
			.info-price {
				flex: 0 0 auto;
				padding-left: 20rpx;
				margin-right: 26rpx;
				color: #FFF;
			}
		}
	}
</style>
